<style lang="less" rel="stylesheet/less" type="text/less" >
    .v-customer-banner-index{
	.ivu-table-column-center{
		padding: 5px 0;
	}
	.ivu-table-cell{
		padding-left: 10px;
		padding-right: 10px;
	}
	.info-banner{
        display: flex;
        justify-content: center;
		white-space: nowrap;
        padding: 5px 0;

	}
	.info-thumb{
		width: 120px;
		height: 120px;
		cursor: pointer;
		display: flex;
		align-items: center;
		img{
			width: 100%;
		}
	}
	.deleted, .hot, .new, .sale {
		cursor: pointer;
    }
    .look_table{
        margin-top: 10px;
    }
}
</style>
<template>
	<div class="v-customer-banner-index">
		<Button
			type="primary"
			size="large"
			@click="toIndex"
		>APP用户列表</Button>
		<Table
			:columns="columns"
			:data="skinRecord"
			:height="tableHeight()"
			class="personal-scrollbar look_table"
			stripe/>
	</div>
</template>
<script>
import { Button } from 'iview';
import showPictureMixin from 'src/views/mixins/showPictureMixin';
import { computedTableHeight } from 'src/views/mixins/computedTableHeight';

export default {
	name: 'Look',
	mixins: [showPictureMixin, computedTableHeight],
	props: {
		skinRecord: {
			type: Array,
			default() {
				return [];
			},
		},
		loading: {
			type: Boolean,
			default() {
				return false;
			},
		},
	},
	 data() {
		return {
			columns: [
				{
					title: this.$t('skin_record.image'),
					key: 'image',
					align: 'center',
					render: (h, { row }) => <div>{
						row.image ? <img src={row.image}
							alt={this.$t('common.none')}
							width="100%"
						/> : this.$t('common.none')
					}
					</div>,
				},
				{
					title: this.$t('skin_record.acne'),
					key: 'acne',
					align: 'center',
					render: (h, { row }) =>
						(row.acne.suggest ?
							<div style="text-align: justify;">     {this.$t('skin_record.acne_level')}：{row.acne.score}
								<br/>
				                {this.$t('skin_record.suggest')}：{row.acne.suggest}
							</div>
							: this.$t('common.none')),
				},
				{
					title: this.$t('skin_record.eyes'),
					key: 'eyes',
					align: 'center',
					render: (h, { row }) =>
						(row.eyes.suggest ?
							<div style="text-align: justify;">     {this.$t('skin_record.eyes_level')}：{row.eyes.score}
								<br/>
				                {this.$t('skin_record.suggest')}：{row.eyes.suggest}
							</div>
							: this.$t('common.none')),
				},
				{
					title: this.$t('skin_record.pore'),
					key: 'pore',
					align: 'center',
					render: (h, { row }) =>
						(row.pore.suggest ?
							<div style="text-align: justify;">     {this.$t('skin_record.pore_level')}：{row.pore.score}
								<br/>
				                {this.$t('skin_record.suggest')}：{row.pore.suggest}
							</div>
							: this.$t('common.none')),
				},
				{
					title: this.$t('skin_record.stain'),
					key: 'stain',
					align: 'center',
					render: (h, { row }) =>
						(row.stain.suggest ?
							<div style="text-align: justify;">     {this.$t('skin_record.stain_level')}：{row.stain.score}
								<br/>
				                {this.$t('skin_record.suggest')}：{row.stain.suggest}
							</div>
							: this.$t('common.none')),
				},
				{
					title: this.$t('skin_record.wrinkle'),
					key: 'wrinkle',
					align: 'center',
					render: (h, { row }) =>
						(row.wrinkle.suggest ?
							<div style="text-align: justify;">     {this.$t('skin_record.wrinkle_level')}：{row.wrinkle.score}
								<br/>
				                {this.$t('skin_record.suggest')}：{row.wrinkle.suggest}
							</div>
							: this.$t('common.none')),
				},
				{
					title: this.$t('skin_record.oil_u'),
					key: 'oil_u',
					align: 'center',
				},
				{
					title: this.$t('skin_record.oil_t'),
					key: 'oil_t',
					align: 'center',
				},
				{
					title: this.$t('skin_record.age'),
					key: 'skin_age',
					align: 'center',
				},
				{
					title: this.$t('skin_record.score'),
					key: 'skin_score',
					align: 'center',
				},
				{
					title: this.$t('skin_record.type'),
					key: 'skin_type',
					align: 'center',
				},
				{
					title: this.$t('common.operation'),
					align: 'center',
					render: (h, { row }) => (
						<div>
							<Button name="index_look_delete" size="small" style={{ marginRight: '5px' }} on-click={() => { this.$emit('delete', row.id); }} type="error">
								{ this.$t('common.delete') }
							</Button>
						</div>
					),
				},
			],
		};
	},
	methods: {
		// 跳转回用户列表界面
            		toIndex() {
			this.$emit('toIndex');
		},
	},


};
</script>
